<template>
	<view class="orders-admin">
		<van-sticky>
			<view class="section_1">
				<van-row class="dates text-center">
					<van-col v-for="item in dates" :key="item.value" :span="6">
						<view class="date-item" :class="{ active: dateActive === item.value }" @click="dateActive = item.value">
							{{ item.label }}
						</view>
					</van-col>
				</van-row>
			</view>
			
			<v-gap />
			
			<view class="section_2">
				<view class="title">
					<text>订单列表</text>
				</view>
				
				<view class="flex-space-between">
					<view class="tabs flex-align">
						<view v-for="(item, index) in tabs" :key="index" class="tab-item" :class="{ active: index === tabActive }"  @click="tabActive = index">
							{{ item.label }}
						</view>
					</view>
					
					<van-dropdown-menu>
						<van-dropdown-item title="筛选" ref="filter">
							<filter-list :filterList="filterList" @confirm="onConfirm" @reset="onReset" />
						</van-dropdown-item>
					</van-dropdown-menu>
				</view>
			</view>
		</van-sticky>
		
		<!-- 订单列表 -->
		<view class="orders-list">
			
			<OrdersItem
				v-for="(item, index) in ordersList"
				:key="index"
				:data="item"
				@click="onClickOrdersItem"
			/>
		</view>
	</view>
</template>

<script>
import OrdersItem from './components/orders-item.vue';
	
export default {
	components: {
		OrdersItem
	},
	data() {
		return {
			dates: [
				{ label: '今日', value: 'today' },
				{ label: '本周', value: 'week' },
				{ label: '本月', value: 'month' },
				{ label: '本年', value: 'year' },
			],
			dateActive: 'today',
			tabs: [
				{ label: '全部' },
				{ label: '未支付' },
				{ label: '售后' },
				{ label: '已关闭' }
			],
			tabActive: 0,
			/*
				状态
				1：未支付
				2：售后
				3：已关闭
			*/
			ordersList: [
				{
					id: 1,
					name: '马甲线健身培训课',
					img: '',
					count: 1,
					price: 20,
					status: 1,
				},
				{
					id: 2,
					name: '马甲线健身培训课',
					img: '',
					count: 1,
					price: 20,
					status: 2
				},
				{
					id: 3,
					name: '篮球全天票',
					img: '',
					count: 1,
					price: 0,
					status: 3,
				}
			],
			filterList: [
				{
					label: '卡号',
					prop: 'number',
					type: 'input',
					placeholder: '请输入卡号'
				},
				{
					label: '产品名称',
					prop: 'name',
					type: 'input',
					placeholder: '请输入产品名称'
				},
				{
					label: '产品分类',
					prop: 'classify',
					type: 'select-btn',
					options: [
						{ label: '课程', value: 0 },
						{ label: '门票', value: 1 },
						{ label: '会员卡', value: 2 },
						{ label: '商品', value: 3 },
						{ label: '场地', value: 4 },
					]
				},
			]
		}
	},
	methods: {
		onConfirm(filterData) {
			this.$refs.filter.toggle();
		},
		onReset() {
			this.$refs.filter.toggle();
		},
		onClickOrdersItem() {
			uni.navigateTo({
				url: '/page_admin/orders-admin/orders-detail/orders-detail'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.orders-admin {
	min-height: 100vh;
	padding-bottom: 40rpx;
	background-color: rgb(240,243,246);
	
	.section_1 {
		padding: 10rpx 30rpx;
		background-color: #fff;
		
		.dates {
			color: rgb(136,136,136);
			font-size: 28rpx;
			font-weight: 700;
			
			.date-item {
				padding: 20rpx 0;
			}
			
			.active {
				color: rgb(51,51,51);
			}
		}
	}
		
	.section_2 {
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 0;
		
		.title text {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 31rpx;
			position: relative;
			z-index: 1;
			
			&::after {
				content: '';
				position: absolute;
				right: 0;
				bottom: 0;
				background-color: rgb(99,93,247);
				border-radius: 4.5rpx;
				width: 62rpx;
				height: 9rpx;
				z-index: -1;
			}
		}
		
		.tabs {
			font-size: 24rpx;
			font-weight: 500;
			column-gap: 26rpx;
			
			.tab-item {
				&.active {
					font-size: 28rpx;
					font-weight: 700;
				}
			}
		}
		
		/deep/.van-dropdown-menu {
			box-shadow: none;
			height: 96rpx;
			
			.van-dropdown-menu__title {
				color: rgb(99,93,247);
			}
		}
	}
	
	.orders-list {
		padding: 30rpx;
	}
}
</style>
